<template>
	<view class="mainpadding">
		<view class="flexbetween">
			<view class="titletext hei_text bold" v-show="orderInfo.status==1 && orderInfo.is_run==1">待取貨</view>
			<view class="titletext hei_text bold" v-show="orderInfo.status==1 && orderInfo.is_run==2">配送中</view>
			<view class="titletext hei_text bold" v-show="orderInfo.status==1 && orderInfo.is_run==3">待確認</view>
			<view class="titletext hei_text bold" v-show="orderInfo.status==2">已完成</view>
			<view class="text_e color_theme" v-if="orderInfo.df_money">預估墊付${{orderInfo.df_money}}</view>
		</view>
		<view class="mainpadding_top ffffff radius">
			<view class="flexbetween">
				<view class="flex">
					<view class="textcenter margin_right2">
						<image class="imgBox" src="@/static/images/index/take.png" mode=""></image>
						<view class="text_a color_zero">2.3</view>
						<view class="text_a color_nine">km</view>
					</view>
					<view style="width: 500rpx;">
						<view class="text_ft color_three">{{orderInfo.to_name}} {{orderInfo.to_phone}}</view>
						<view class="text_d color_nine margin_top2">{{orderInfo.to_address}}</view>
					</view>
				</view>
				<image class="navigationBox" src="@/static/images/goodsOrder/navigation.png" mode=""
					@click="daohang(orderInfo.to_address)"></image>
			</view>
			<image class="fromImg " src="/static/images/index/from.png" mode=""></image>
			<view class="flexbetween">
				<view class="flex">
					<view class="textcenter margin_right2">
						<image class="imgBox" src="@/static/images/index/deliver.png" mode=""></image>
						<view class="text_a color_zero">2.3</view>
						<view class="text_a color_nine">km</view>
					</view>
					<view style="width: 500rpx;">
						<view class="text_ft color_three">{{orderInfo.go_name}} {{orderInfo.go_phone}}</view>
						<view class="text_d color_nine margin_top2">{{orderInfo.go_address}}</view>
					</view>
				</view>
				<image class="navigationBox" src="@/static/images/goodsOrder/navigation.png" mode=""
					@click="daohang(orderInfo.go_address)"></image>
			</view>
		</view>
		<view class="mainpadding_top ffffff radius" v-if="orderInfo.ordernotes">
			<view class="text_ft color_three">訂單備注</view>
			<view class="xiaohui margin_top">{{orderInfo.ordernotes}}</view>
		</view>
		<view class="" style="padding-bottom: 150rpx;">
			<view class="mainpadding_top ffffff radius">
				<view class="flexbetween">
					<view class="hei_text main_size bold">收益</view>
					<view class="xiaohuang">${{orderInfo.z_money}}</view>
				</view>
				<view class="flexbetween margin_top" v-if="orderInfo.goods_kg">
					<view class="hei_text main_size bold">重量</view>
					<view class="xiaohuang">{{orderInfo.goods_kg}}kg</view>
				</view>
				<view class="flexbetween margin_top" v-if="orderInfo.chang || orderInfo.kuan || orderInfo.gao">
					<view class="hei_text main_size bold">尺寸</view>
					<view class="xiaohuang">{{orderInfo.chang || 0}}*{{orderInfo.kuan || 0}}*{{orderInfo.gao || 0}}
					</view>
				</view>
				<view class="flexbetween margin_top" v-if="orderInfo.images_arr">
					<view class="text_a color_ling">用户上傳</view>
					<!-- <view class="text_a color_six">2023-06-23 10:24:20</view> -->
				</view>
				<view class="flexleft flex_wrap">
					<view class="itemimgBox flexcenter margin_top" v-for="(item,index) in orderInfo.images_arr"
						:key="index">
						<image class="listleftimg radius" :src="item" mode=""
							@click="lbtpriview(index,orderInfo.images_arr)"></image>
					</view>
				</view>
				<view class="flexbetween margin_top">
					<view class="hei_text main_size bold">接單時間</view>
					<view class="xiaohui ">{{http.timereturn(orderInfo.jd_time * 1000)}}</view>
				</view>
				<view class="flexbetween margin_top" v-if="orderInfo.pzqh_image_text">
					<view class="hei_text main_size bold">騎手取貨上傳</view>
					<view class="xiaohui ">{{http.timereturn(orderInfo.pzqh_time * 1000)}}</view>
				</view>
				<view class="flexleft" v-if="orderInfo.pzqh_image_text">
					<view class="itemimgBox flexcenter margin_top" v-for="(item,index) in orderInfo.pzqh_image_text"
						:key="index">
						<image class="listleftimg radius" :src="item" mode=""
							@click="lbtpriview(index,orderInfo.pzqh_image_text)"></image>
					</view>
				</view>
				<view class="flexbetween margin_top" v-if="orderInfo.pzsd_image_text">
					<view class="hei_text main_size bold">騎手送達上傳</view>
					<view class="xiaohui ">{{http.timereturn(orderInfo.pzsd_time * 1000)}}</view>
				</view>
				<view class="flexleft" v-if="orderInfo.pzsd_image_text">
					<view class="itemimgBox flexcenter margin_top" v-for="(item,index) in orderInfo.pzsd_image_text"
						:key="index">
						<image class="listleftimg radius" :src="item" mode=""
							@click="lbtpriview(index,orderInfo.pzsd_image_text)"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="mainpadding posibottom" style="bottom: 0;">
			<view class="submitbtn">立即搶單</view>
		</view> -->
		<view class="mainpadding posibottom flexbetween ffffff" style="bottom: 0;" v-if="orderInfo.status==1">
			<view class="flexleft">
				<view class="flexcolumn margin_right5" @click="callphone(orderInfo.to_phone)">
					<u-icon name="phone" color="#333" size="24"></u-icon>
					<view class="xiaohui margin_top">取货</view>
				</view>
				<view class="flexcolumn margin_right5" @click="callphone(orderInfo.go_phone)">
					<u-icon name="phone" color="#333" size="24"></u-icon>
					<view class="xiaohui margin_top">送货</view>
				</view>
			</view>
			<view class="yellowBtn flex1" v-if="orderInfo.is_run==1" @click.stop="show=true;upflag=1;">拍照取貨</view>
			<view class="yellowBtn flex1" v-if="orderInfo.is_run==2" @click.stop="show=true;upflag=2;">拍照送達</view>
			<view class="huibtn flex1" v-if="orderInfo.is_run==3 && orderInfo.status==1">待確認</view>
		</view>
		<u-modal :show="show" title="拍照上傳" confirmColor="#ffb800" confirmText="確認" @confirm="upconfirm" cancelText="取消"
			@cancel="show=false" showCancelButton>
			<view class="slot-content" style="width: 730rpx;">
				<view class="flexleft flex_wrap">
					<view class="itemimgBox flexcenter margin_top2" v-for="(item,index) in images_text" :key="index">
						<!-- 已上傳 -->
						<view class="listleftimg1 radius">
							<image class="radius" :src="item" mode=""></image>
							<view class="deleteimg" @click="delindex(index,images,images_text)"></view>
						</view>
					</view>
					<view class="itemimgBox flexcenter margin_top2" @click="uploadImg(4,images,images_text)"
						v-if="images.length<4"><!-- 未上傳 -->
						<image class="listleftimg1 radius" src="@/static/images/system/upimg.png" mode=""></image>
					</view>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: "",
				orderInfo: {},
				show: false,
				images: [],
				images_text: [],
				upflag: 0, //1拍照取貨，2拍照送達
			}
		},
		onLoad(options) {
			this.id = options.id
			this.getInfo()
		},
		methods: {
			qiangdan(id) {
				this.http.modal('搶單', '是否確認搶單', true, (res) => {
					if (res) {
						this.http.request('/api/ordergoods/ordergoodsqd', 'POST', {
							id: id,
							shopstaff_id: uni.getStorageSync("shopstaff_id"),
						}).then(res => {
							this.http.toast(res.msg)
							if (res.code == 1) {
								this.getInfo()
							}
						})
					}
				})
			},
			upconfirm() {
				if (this.images.length == 0) {
					this.http.toast("請上傳圖片！")
					return false
				}
				this.show = false
				let url = "/api/goods/orderrunpz"
				let data = {
					id: this.id,
					pzqh_image: this.images.join()
				}
				if (this.upflag == 2) {
					url = "/api/goods/orderrunsd"
					data = {
						id: this.id,
						pzsd_image: this.images.join()
					}
				}
				this.http.request(url, 'POST', data).then(res => {
					this.http.toast(res.msg)
					if (res.code == 1) {
						this.images = []
						this.images_text = []
						this.getInfo()
					}
				})
			},
			uploadImg(value, upImgs, upImgs_text) { //上傳圖片
				let _this = this;
				let num = Number(value) - upImgs.length;
				if (num <= 0) {
					return false;
				}
				this.http.chooseImage(num, ['camera']).then(res => {
					for (var i = 0; i < res.length; i++) {
						_this.uploadImageService(res[i], upImgs, upImgs_text)
					}
				}).catch(err => {});
			},
			delindex(index, upImg, upImgs_text) {
				upImg.splice(index, 1)
				upImgs_text.splice(index, 1)
			},
			uploadImageService(url, upImg, upImgs_text) {
				let _this = this;
				this.http.uploadFile('/api/common/upload', url).then(res => {
					let image_item = res.fullurl;
					upImg.push(res.url)
					upImgs_text.push(image_item);
				}).catch(err => {});
			},
			async getInfo() { //訂單详情
				let res = await this.http.request('/api/goods/orderrundeail', 'POST', {
					id: this.id
				})
				if (res.code == 1) {
					if (res.data.images) {
						let images_arr1 = res.data.images.split(",")
						let images_arr = []
						if (images_arr1.length) {
							images_arr1.forEach(item => {
								let text = this.imgUrlUser + item
								images_arr.push(text)
							})
							this.$set(res.data, "images_arr", images_arr)
							console.log(res.data);
						}
					}
					if (res.data.pzqh_image) {
						let pzqh_image_text1 = res.data.pzqh_image.split(",")
						let pzqh_image_text = []
						if (pzqh_image_text1.length) {
							pzqh_image_text1.forEach(item => {
								let text = this.imgUrlUser + item
								pzqh_image_text.push(text)
							})
							this.$set(res.data, "pzqh_image_text", pzqh_image_text)
							console.log(res.data);
						}
					}
					if (res.data.pzqh_image) {
						let pzqh_image_text1 = res.data.pzqh_image.split(",")
						let pzqh_image_text = []
						if (pzqh_image_text1.length) {
							pzqh_image_text1.forEach(item => {
								let text = this.imgUrlUser + item
								pzqh_image_text.push(text)
							})
							this.$set(res.data, "pzqh_image_text", pzqh_image_text)
							console.log(res.data);
						}
					}

					if (res.data.pzsd_image) {
						let pzsd_image_text1 = res.data.pzsd_image.split(",")
						let pzsd_image_text = []
						if (pzsd_image_text1.length) {
							pzsd_image_text1.forEach(item => {
								let text = this.imgUrlUser + item
								pzsd_image_text.push(text)
							})
							this.$set(res.data, "pzsd_image_text", pzsd_image_text)
						}
					}
					// this.$set(res.data, "goods_allprice", goods_allprice)
					this.orderInfo = res.data
					this.pageShow = true
				} else if (res.code == 0) {
					this.http.toast(res.msg)
				} else {
					this.http.toast('網絡開小差啦');
				}
			},
			lbtpriview(index, arr) {
				var i = arr; //獲取当前页面的轮播图数据
				//uniapp预览轮播图
				uni.previewImage({
					current: index, //预览图片的下标
					urls: i //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.listleftimg1 {
		width: 120rpx;
		height: 120rpx;
		position: relative;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.topimg {
		width: 40rpx;
		height: 40rpx;
	}

	.imgBox {
		width: 40rpx;
		min-width: 40rpx;
		height: 40rpx;
	}

	.fromImg {
		width: 9rpx;
		height: 30rpx;
		margin-left: 15rpx;
	}

	.navigationBox {
		width: 58rpx;
		min-width: 58rpx;
		height: 58rpx;
	}
</style>